<script>
import { computed, defineComponent } from 'vue'

export default defineComponent({
  props: {
    list: {
      type: Array,
      required: true,
    },
  },
  setup(props, context) {
    let list = computed(() => {
      return props.list
    })

    let itemWidth = computed(() => {
      return 100 / list.value.length + '%'
    })
    return { list, itemWidth }
  },
  render() {
    return (
      <div class="container">
        {this.list.map((item, index) => {
          let cls = {
            width: `calc( ${this.itemWidth} `,
            float: 'left',
            display: 'flex',
            'flex-direction': 'column',
            'justify-content': 'flex-start',
            position: 'relative',
          }

          let lineStyle = { 'border-bottom': '1px solid rgb(215, 215, 215)' }
          let iconStyle = { color: 'rgb(215, 215, 215)' }
          if (item.complete) {
            lineStyle['border-bottom'] = '1px solid rgb(7,120,7)'
            iconStyle['color'] = 'rgb(7,120,7)'
          }
          if (index == this.list.length - 1) {
            lineStyle['border-bottom'] = '0px'
          }

          return (
            <div style={cls}>
              <div class="icon" style={iconStyle}>
                {item.icon}
              </div>
              <div class="through-line" style={lineStyle}></div>

              <div
                style={{
                  ...iconStyle,
                }}
              >
                {item.mainText}
              </div>
              <div
                style={{
                  color: 'rgb(127, 127, 127)',
                  'font-size': '12px',
                }}
              >
                {item.subText}
              </div>
            </div>
          )
        })}
      </div>
    )
  },
})
</script>
<style scoped>
.container {
  width: 100%;
  overflow: hidden;
}

.icon {
  font-size: 22px;
  color: rgb(136, 136, 136);
}
.through-line {
  width: calc(100% - 22px);
  position: absolute;
  left: 22px;
  top: 16px;
}
</style>
